<!DOCTYPE HTML>
<html>
<head>
    <title></title>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="jquery.qtip.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="jquery.qtip.css" media="screen" />
<script type="text/javascript">
/***********************************************
* jQuery Custom Scrollbar script (c) Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
</script>
<script type="text/javascript">
var scroll1, execute = false;
var chart;
$(document).ready(function () {
	$("#toolContent").hide();
/*	var consumptionTimeSeries = new TimeSeries();
	var smoothieChart = new SmoothieChart({ grid: { strokeStyle: 'rgb(125, 0, 0)', fillStyle: 'rgb(60, 0, 0)', lineWidth: 1, millisPerLine: 1000, verticalSections: 2 } });
	 smoothieChart.addTimeSeries(consumptionTimeSeries, { strokeStyle:'rgb(0, 255, 0)', fillStyle:'rgba(0, 255, 0, 0.4)', lineWidth:3 });
	 smoothieChart.streamTo(document.getElementById("mycanvas"),5000);
/*	 setInterval(function() {
		 consumptionTimeSeries.append(new Date().getTime(), Math.random());
		// smoothieChart.streamTo(document.getElementById("mycanvas"),5000);
	 }, 1000); */
	$("#inner").qtip({
		 content: {
			 text : $("#toolContent"),
			 title : {
				 text : "Tooltip"
			 }
		 },
		 position: {
			my : "top left",
			at : "bottom left"
         },
         style: {
        	 tip : {
        		 corner : "top middle"
        	 },
        	 width: 600,
             classes: "ui-tooltip-dark ui-tooltip-rounded"
         },
         show: {
        	 event : "click",
        	 effect : function(offset) {
        		 $(this).slideDown(200);
        	 }
         },
         hide: {
        	 target : $("#clickMe"),
        	 event : "click",
        	 effect : function (offset ){
        		 $(this).slideUp(200);
        	 }
         }
	});

});
</script>
<style>

/*#container { height : 300px; width : 600px;}*/
</style>
</head>

<body>
  <h1>Smoothie Example</h1>
	
	<!-- input type="submit" id="check" value="Enable" -->
	<!-- canvas id="mycanvas" width="400" height="100" -->					

	<div id="container" title="Hi there!">What is UP?
		<div id="nono">
			<div id="inner">
				<p>Tooltip works here!!</p>
			</div>
		</div>
	</div>
	
	<div id="toolContent">
		<h1>Hello</h1>
		<br />
		<p>Bye bye</p>
		<input id="clickMe" type="submit" value="Submit">
	</div>
</body>
</html>